<template>
  <div class="event-log-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">事件日志</h1>
    </div>

    <!-- 搜索栏 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-6 mb-6">
      <el-input
        v-model="searchText"
        placeholder="搜索用户名称/所属单位/电话号码"
        class="w-96"
        clearable
      >
        <template #prefix>
          <i class="fas fa-search text-neutral-400"></i>
        </template>
      </el-input>
    </div>

    <!-- 事件日志表格 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm overflow-hidden">
      <el-table
        :data="filteredLogs"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '500' }"
      >
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="applicant" label="申请人" width="120" />
        <el-table-column prop="department" label="所属单位" width="120" />
        <el-table-column prop="event" label="申请事件" width="140" />
        <el-table-column prop="applyTime" label="申请时间" width="180" />
        <el-table-column prop="approver" label="审批人" width="120" />
        <el-table-column prop="approveTime" label="审批时间" width="180" />
        <el-table-column prop="status" label="审批状态" width="140">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="flex justify-center py-4 border-t border-neutral-200 dark:border-neutral-700">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, sizes"
          :total="logs.length"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 模拟事件日志数据
const logs = ref([
  { id: 1, applicant: '111', department: 'jrlc', event: '许可证导出', applyTime: '2023-10-05 14:32:35', approver: '张三', approveTime: '2023-10-05 14:32:35', status: '已审批' },
  { id: 2, applicant: '222', department: 'jrlc', event: '许可证转移', applyTime: '2023-10-05 14:32:35', approver: '张三', approveTime: '2023-10-05 14:32:35', status: '待审批' },
  { id: 3, applicant: '333', department: 'jrlc', event: '许可证激活', applyTime: '2023-10-05 14:32:35', approver: '张三', approveTime: '2023-10-05 14:32:35', status: '审批通过' },
  { id: 4, applicant: '444', department: 'jrlc', event: '许可证续出', applyTime: '2023-10-05 14:32:35', approver: '张三', approveTime: '2023-10-05 14:32:35', status: '审批驳回' }
])

const filteredLogs = computed(() => {
  let result = logs.value
  if (searchText.value) {
    result = result.filter(log => 
      log.applicant.includes(searchText.value) ||
      log.department.includes(searchText.value)
    )
  }
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return result.slice(start, end)
})

const getStatusType = (status) => {
  const statusTypes = {
    '已审批': 'success',
    '待审批': 'warning',
    '审批通过': 'success',
    '审批驳回': 'danger'
  }
  return statusTypes[status] || ''
}
</script>

<style scoped>
.event-log-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

